<template>
  <div class="print-wrap" v-loading="loading">

    <template v-if="JSON.stringify(tableData) != '{}'">
      <div class="print-wrap-btnBox">
        <el-button ref="printBtn" type="plain-third" class="print-wrap-btnBox-btn" v-print="print">
          <i class="iconfont icon-printer"></i>{{ $t('common.base.print') }}
        </el-button>
      </div>

      <div class="print-wrap-content" id="printBox">
        <!-- 头部 -->
        <div class="print-wrap-content-header">
          <!-- logo区域 -->
          <div class="print-wrap-content-header-imgs">
            <div>
              <img class="logo_1" :src="logo_1" alt="">
            </div>
            <div>
              <img class="logo_2" :src="logo_2" alt="">
              <img class="logo_3" :src="logo_3" alt="">
            </div>
          </div>
          <!-- 标题 -->
          <div class="print-wrap-content-header-title">
            SALOMON HG & ATOMIC产品售后申请表
          </div>
          <!-- 介绍文案 -->
          <div class="print-wrap-content-header-desc">
            <div class="print-wrap-content-header-desc-item">
              亚玛芬体育用品贸易（上海）有限公司
            </div>
            <div class="print-wrap-content-header-desc-item">
              地址：上海市 陆家嘴世纪金融广场锦康路308号6号楼203售后部
            </div>
            <div class="print-wrap-content-header-desc-item">
              3F，Building 2,Lujiazui Century Financial Plaza,759 Yang Gao Road(S),Pudong New Area.
            </div>
          </div>
        </div>
        <!-- 表格 -->
        <div class="print-wrap-content-table">
          <table border="1">
            <!-- 第1行 -->
            <tr>
              <td rowspan="15" class="tb-rl">客户填写信息（必填）</td>
              <td rowspan="2" colspan="3" class="underLine bold">客户信息：{{ tableData.customerNameOne }}</td>
              <td class="underLine bold">检测编号: <br>Test No</td>
              <td colspan="2">{{ tableData.eventNo }}</td>
            </tr>
            <!-- 第2行 -->
            <tr>
              <td class="underLine bold">接收日期：<br>Date</td>
              <td colspan="2">{{ tableData.createTime | fmt_datetime}}</td>
            </tr>
            <!-- 第3行 -->
            <tr>
              <td class="bg-color-grey">维修类别：<br>Repair Type</td>
              <td colspan="5">{{ tableData.categoryRepair }}</td>
            </tr>
            <!-- 第4行 -->
            <tr>
              <td class="bg-color-grey">寄件人：<br>Send By</td>
              <td colspan="5">{{ tableData.sender }}</td>
            </tr>
            <!-- 第5行 -->
            <tr>
              <td class="bg-color-grey">零售商名称：<br>Customer Name</td>
              <td colspan="2">{{ tableData.storeName }}</td>
              <td class="bg-color-grey">地址：<br>Address</td>
              <td colspan="2">{{ tableData.storeAdd }}</td>
            </tr>
            <!-- 第6行 -->
            <tr>
              <td class="bg-color-grey">联系人：<br>Contact Person</td>
              <td colspan="2">{{ tableData.storeContacts }}</td>
              <td class="bg-color-grey">电话：<br>Phone Number</td>
              <td colspan="2">{{ tableData.storePhone }}</td>
            </tr>
            <!-- 第7行 -->
            <tr>
              <td class="bg-color-grey">消费者姓名：<br>ConsumerName</td>
              <td colspan="2">{{ tableData.customerName }}</td>
              <td class="bg-color-grey">电话：<br>Phone Number</td>
              <td colspan="2">{{ tableData.customerPhone }}</td>
            </tr>
            <!-- 第8行 -->
            <tr>
              <td class="bg-color-grey">购买城市：<br>Purchasing area</td>
              <td colspan="2">{{ tableData.buyCity }}</td>
              <td class="bg-color-grey">联系地址：<br>Address</td>
              <td colspan="2">{{ tableData.contactAddress }}</td>
            </tr>
            <!-- 第9行 -->
            <tr>
              <td class="underLine bold" colspan="6">产品类别：</td>
            </tr>
            <!-- 第10行 -->
            <tr>
              <td class="bg-color-grey">规格/型号：<br>Mode</td>
              <td colspan="2">{{ tableData.model }}</td>
              <td class="bg-color-grey">品名：<br>Product Name</td>
              <td colspan="2">{{ tableData.productName }}</td>
            </tr>
            <!-- 第11行 -->
            <tr>
              <td class="bg-color-grey">颜色：<br>Color</td>
              <td colspan="2">{{ tableData.color }}</td>
              <td class="bg-color-grey">尺码：<br>Size</td>
              <td colspan="2">{{ tableData.size }}</td>
            </tr>
            <!-- 第12行 -->
            <tr>
              <td class="bg-color-grey">购买日期：<br>Purchase Date</td>
              <td colspan="2">{{ tableData.buyDate }}</td>
              <td class="bg-color-grey">购买价格：<br>Price</td>
              <td colspan="2">{{ tableData.buyPrice }}</td>
            </tr>
            <!-- 第13行 -->
            <tr>
              <td class="bg-color-grey">发票:<br>Purchasing Invoice</td>
              <td colspan="2"></td>
              <td class="bg-color-grey">保修卡：<br>Warranty Card</td>
              <td colspan="2"></td>
            </tr>
            <!-- 第14行 -->
            <tr>
              <td class="bg-color-grey">产品问题描述：<br>Defective Description</td>
              <td colspan="2">{{ tableData.problemDesc }}</td>
              <td class="bg-color-grey">工厂编号(鞋子必填）：<br>Factory Code</td>
              <td colspan="2"></td>
            </tr>
            <!-- 第15行 -->
            <tr>
              <td class="bg-color-grey">特殊处理需求:<br>Special request</td>
              <td colspan="5"></td>
            </tr>
            <!-- 第16行 -->
            <tr>
              <td rowspan="6" class="tb-rl">售后服务部填写</td>
              <td class="bg-color-yellow">收到时间：<br>Receive date</td>
              <td colspan="2">{{ tableData.timeOfReceipt }}</td>
              <td class="bg-color-yellow">收到货物情况:<br>Product Description</td>
              <td colspan="2">{{ tableData.goodsOfReceipt }}</td>
            </tr>
            <!-- 第17行 -->
            <tr>
              <td class="bg-color-yellow">质量鉴定结果：<br>Quality Check</td>
              <td colspan="5">{{ tableData.qualityAppraisalResults }}</td>
            </tr>
            <!-- 第18行 -->
            <tr>
              <td class="bg-color-yellow">处理完成时间：<br>Deal Date</td>
              <td colspan="2">{{ tableData.processingCompletionTime }}</td>
              <td class="bg-color-yellow">处理方式：<br>Method</td>
              <td colspan="2">{{ tableData.processingMethod }}</td>
            </tr>
            <!-- 第19行 -->
            <tr>
              <td class="bg-color-yellow">更换型号：<br>Exchange Model</td>
              <td>{{ tableData.changeModel }}</td>
              <td class="bg-color-yellow">支付费用：<br>Service Fee</td>
              <td>{{ tableData.paymentOfExpenses }}</td>
              <td class="bg-color-yellow">其他方式：<br>Others</td>
              <td>{{ tableData.otherMethod }}</td>
            </tr>
            <!-- 第20行 -->
            <tr>
              <td class="bg-color-yellow">备注：<br>Remark</td>
              <td colspan="5">{{ tableData.remake }}</td>
            </tr>
            <!-- 第21行 -->
            <tr>
              <td colspan="6">
                <strong>用户须知：</strong><br>
                1.用户请认真核对填写资料是否完整正确，这将成为服务的重要依据。同时，本公司会根据客户资料对消费者进行满意度调查。<br>
                2.用户确认维修商品（尤其是服装类商品）中不携带钱物，配饰，票据，文件等和检修商品无关之物品。如出现丢失或损坏，本公司不承担任何责任。<br>
                3.用户送修商品时的问题描述，仅作为保修和维修的参考依据，是否存在质量问题或予以保修由亚玛芬体育用品贸易（上海）有限公司专业检测后确定。<br>
                #为保证地球资源的可持续发展，我们将尽可能的减少对资源的浪费。所以我们将优先对雪具进行维修处理。维修已损坏的雪具，我们只能够优先保证其性能。并不能保证其外观恢复出厂设置。
              </td>
            </tr>

          </table>

        </div>
      </div>
    </template>

  </div>
</template>

<script>
/** assets */
import logo_1 from '@src/assets/img/amer-logo-1.png'
import logo_2 from '@src/assets/img/amer-logo-2.png'
import logo_3 from '@src/assets/img/amer-logo-3.png'
/** api */
import { getAmerPrintBX } from '@src/api/EventApi.js'

export default {
  name: 'AmerPrintTemplateA',
  data() {
    return {
      logo_1,
      logo_2,
      logo_3,
      print: {
        id: 'printBox',
        popTitle: '&nbsp;', //页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
      tableData: {},
      loading: true
    }
  },
  mounted() {
    this.eventPrint()
  },
  methods: {
    async eventPrint() {
      try {
        const { id,templateName } = this.$route.query
        if (!id || !templateName) return console.error('未知事件')
        const { status, data, message } = await getAmerPrintBX({ eventId: id,templateName })
        if (status == 0) {
          this.tableData = data
          this.$nextTick(()=>{
            this.$refs.printBtn.$el.click()
          })
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.print-wrap {
  width: 100%;
  min-height: 100vh;
  height: auto;

  &-btnBox {
    width: 100%;
    text-align: right;
    padding: 20px;

    &-btn {}
  }

  &-content {
    width: 1000px;
    margin: auto;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;

    &-header {
      &-imgs {
        display: flex;
        justify-content: space-between;

        .logo_1 {
          width: 90px;
        }

        .logo_2 {
          width: 65.5px;
        }

        .logo_3 {
          width: 58px;
        }
      }

      &-title {
        font-size: 18px;
        text-align: center;
        font-weight: bold;
        text-decoration: underline;
        padding: 10px 0;
      }

      &-desc {
        &-item {
          color: #000000;
          font-weight: bold;
          margin-top: 4px;
        }
      }
    }

    &-table {
      width: 100%;
      margin-top: 10px;

      table {
        width: 100%;
      }
    }
  }
}

tr {}

td {
  min-width: 100px;
  height: 30px;
  box-sizing: border-box;
  padding: 4px;
}

.tb-rl {
  writing-mode: tb-rl;
  text-align: center;
}

.bg-color-grey {
  background-color: rgb(217, 217, 217);
}

.bg-color-yellow {
  background-color: rgb(196, 189, 151);
}

.underLine {
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}
</style>